<template>
  <div class="question">
    <!-- 头部导航 -->
    <van-dropdown-menu>
      <van-dropdown-item ref="myCity">
        <template #title>
          <div class="title">
            面试宝典 <span>{{ selCity }}</span>
          </div>
        </template>
        <van-index-bar>
          <template v-for="(value, key) in cityList">
            <van-index-anchor :index="key" :key="key" />
            <van-cell
              v-for="(item, index) in value"
              :title="item"
              :key="index + key"
              @click="changeCity(item)"
            />
          </template>
        </van-index-bar>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 岗位区域 -->
    <div class="position">
      <span
        @click="selectPos(index)"
        :class="{ isRed: index === currentIndex }"
        v-for="(item, index) in positionList"
        :key="index"
        >{{ item.name }}</span
      >
    </div>
    <!-- 刷题区域 -->
    <div class="exercisesBox">
      <div class="left">
        <div class="tag one">
          <i class="iconfont iconicon_mine_cuoti"></i>
          <span>常错题库</span>
        </div>
        <div class="tag two">
          <i class="iconfont iconicon_mine_cuoti"></i>
          <span>企业题库</span>
        </div>
      </div>
      <div class="center">
        <div class="middle">
          <van-circle
            class="circle"
            v-model="currentRate"
            stroke-width="70"
            layer-color="transparent"
            :rate="this.rate"
            :speed="100"
          >
            <template>
              <div class="text">
                <div class="title">顺序刷题</div>
                <div class="num">{{ rightNum }}/{{ totalNum }}</div>
              </div>
            </template>
          </van-circle>
        </div>
      </div>
      <div class="right">
        <div class="tag three">
          <i class="iconfont iconicon_mine_cuoti"></i>
          <span>收藏题库</span>
        </div>
        <div class="tag four">
          <i class="iconfont iconicon_mine_cuoti"></i>
          <span>已答题库</span>
        </div>
      </div>
    </div>
    <!-- 累计收录 -->
    <div class="totalTit">
      <h3>累计收录</h3>
      <p>{{ totalCount }}</p>
    </div>
    <van-button class="btn" color="#00b8d4" @click="tointerview"
      >模拟面试</van-button
    >
  </div>
</template>

<script>
import { getQuestionDataApi } from '@/api/interview'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      currentRate: 0,
      cityList: {},
      cityPosition: '',
      selCity: '',
      positionList: '',
      currentIndex: 0,
      totalCount: 0,
      rightNum: 0,
      totalNum: 0,
      rate: 0
    }
  },
  methods: {
    // 去刷题页面
    tointerview () {
      this.$router.push(
        `/interview/${this.positionList[this.currentIndex].id}/${this.selCity}`
      )
    },

    selectPos (index) {
      this.currentIndex = index
      console.log(this.currentIndex)
    },
    changeCity (item) {
      this.selCity = item
      this.positionList = this.cityPosition[this.selCity]
      this.$refs.myCity.toggle()
      this.currentIndex = 0
    },
    // 刷题盒子的加载动画
    myanimat () {
      var totalTime = 2000
      var timeID1 = setInterval(() => {
        this.rightNum += 1
        if (this.rightNum >= this.user.correctQuestions.length) {
          clearInterval(timeID1)
        }
      }, totalTime / this.user.correctQuestions.length)

      var timeID2 = setInterval(() => {
        this.totalNum += 1
        if (this.totalNum >= this.totalCount) {
          clearInterval(timeID2)
        }
      }, totalTime / this.totalCount)
      setTimeout(() => {
        this.rate = Math.round(
          (this.user.correctQuestions.length / this.totalCount) * 100
        )
      }, 2000)
    }
  },
  computed: {
    ...mapState(['user'])
  },
  async created () {
    this.$toast({
      type: 'loading',
      message: '加载中....',
      duration: 0
    })

    // 调用接口保存
    const res = await getQuestionDataApi()
    console.log(res)
    this.cityList = res.data.data.citys
    this.cityPosition = res.data.data.cityPositions
    this.selCity = this.cityList['全国'][0]
    this.positionList = this.cityPosition[this.selCity]
    this.totalCount = res.data.data.totalCount
    console.log(this.totalCount)

    this.myanimat()

    this.$toast.clear()
  }
}
</script>

<style lang="less" scoped>
.question {
  background-color: #f7f4f5;
  /deep/.van-index-anchor {
    background-color: #f7f4f5;
  }

  // 头部导航
  .title {
    font-size: 18px;
    font-weight: 700;

    span {
      font-size: 12px;
      color: #545671;
    }
  }
  // 岗位区域
  .position {
    display: flex;
    background-color: #fff;
    flex-wrap: nowrap;
    padding: 20px;
    overflow: auto;
    &::-webkit-scrollbar {
      display: none;
    }
    .isRed {
      background-color: red;
    }
    span {
      flex-shrink: 0; // 如果子元素的总长度超过一行，不需要子元素等比例缩小
      margin-right: 16px;
      padding: 6px 12px;
      font-size: 12px;
      color: #545671;
      background-color: #f7f4f5;
      border-radius: 16px;
    }
  }
  // 刷题区域
  .exercisesBox {
    display: flex;
    padding: 17px 0;
    background-color: #fff;
    .left {
      flex: 1;
      text-align: center;
      .one {
        margin-bottom: 33px;
        i {
          background-color: red;
        }
      }
      .two {
        i {
          background-color: skyblue;
        }
      }
    }
    .center {
      flex: 1;
      position: relative;
      .middle {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100px;
        height: 100px;
        transform: translate(-50%, -50%);
        background-image: url('../../../assets/quanquan.png');
        background-size: 100%;
        .circle {
          padding: 10px;
          box-sizing: border-box;
        }
        .text {
          width: 80px;
          height: 80px;
          background-color: #f23a66;
          border-radius: 50%;
          color: #fff;
          .title {
            font-size: 14px;
            font-weight: 700;
            padding-top: 20px;
          }
          .num {
            font-size: 14px;
            padding-top: 10px;
          }
        }
      }
    }
    .right {
      flex: 1;
      .three {
        margin-bottom: 33px;
        i {
          background-color: orange;
        }
      }
      .four {
        i {
          background-color: yellowgreen;
        }
      }
    }
    .tag {
      display: block;
      text-align: center;
      // background-color: #00c7de;
      font-size: 12px;
      color: #545671;
      line-height: 17px;
      i {
        display: block;
        margin: 0 auto 5px;
        width: 44px;
        height: 44px;
        background-color: pink;
        border-radius: 50%;
        color: #fff;
        font-size: 24px;
        line-height: 44px;
      }
      span {
        display: block;
      }
    }
  }
  // 累计收录
  .totalTit {
    margin-top: 15px;
    background-color: #fff;
    text-align: center;
    h3 {
      padding: 21px 0 0;
      font-size: 18px;
      font-family: PingFangSC, PingFangSC-Semibold;
      font-weight: 600;
      color: #545671;
      line-height: 25px;
    }
    p {
      font-size: 30px;
      font-weight: 600;
      color: #545671;
      padding-bottom: 21px;
    }
  }
  .btn {
    display: block;
    margin: 0 auto;
    width: 345px;
    height: 50px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    border-radius: 7px;
  }
}
</style>
